// 预订疫苗界面，展示医疗点可用疫苗数量，并可以点击预约
<template>
    <template v-if="history.length > 0">
        <span>疫苗接种记录</span>
        <el-row style="margin-top:20px">
            <el-col v-for="(item, index) in history" :key="item" :span="6" :offset="index > 0 ? 2 : 0">
                <el-card>
                    <template #header>
                        <div class="card-header" v-if="item.status === 1" >
                            <span> 第 {{index + 1}} 针 </span>
                            <el-button type="text" @click="deleteApp">撤销</el-button>
                        </div>
                        <div v-else >
                            <span> 第 {{index + 1}} 针 </span>
                        </div>
                    </template>
                    <div class="item"> {{item.medical_point}} </div>
                    <div class="item"> {{item.time}} </div>
                    <div class="item"> {{item.manufacturer > 0 ? '科兴' : '北京生物' }} </div>
                    <div class="item"> {{item.status > 0 ? '预约中' : '已完成' }} </div>
                </el-card>
            </el-col>
        </el-row>
    </template>

    <template v-else>
        <span>尚未接受疫苗接种</span>
    </template>

    <template v-if="showForm">
        <el-table v-loading="loading" :data="medical_points" height="650px" style="margin-top:20px">
            <el-table-column prop="username" sortable label="机构" />
            <el-table-column prop="vaccine_B" sortable label="剩余疫苗（北京生物）" />
            <el-table-column prop="vaccine_K" sortable label="剩余疫苗（科兴）" />
            <el-table-column prop="address" label="地址" />
            <el-table-column prop="phone" label="联系方式" />
            <el-table-column label="操作">
                <template v-slot="scope">
                    <el-button type="primary" @click="openDialog(scope.row.id, scope.row.vaccine_B, scope.row.vaccine_K)">预约</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>

    <el-dialog v-model="dialogVisible" title="选择">
        <el-form :model="dialogForm" ref="dialogForm" :rules="dialogRules">
            <el-form-item label="疫苗种类" :label-width="'140px'" prop="type">
                <el-radio-group v-model="dialogForm.type">
                    <el-radio v-if="temp_B > 0" label=0 >北京生物</el-radio>
                    <el-radio v-if="temp_K > 0" label=1 >科兴</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelDialog()">取消</el-button>
                <el-button type="primary" @click="bookVaccine()">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { Request } from '../../utils/request'
import { ElMessage } from 'element-plus'
export default {
    name: 'VaccineBook',
    data() {
        return {
            history: [],
            medical_points: [],
            historyLoading: false,
            listLoading: false,
            temp_id: -1,
            temp_B: 0,
            temp_K: 0,
            dialogForm: {
                type: undefined
            },
            dialogVisible: false,
            dialogRules: {
                type: [{ required: true, message: '请选择疫苗种类', trigger: 'blur' }]
            }
        };
    },
    created() {
        this.reload()
    },
    computed: {
        loading() {return this.historyLoading | this.listLoading},
        showForm() {return this.history.length === 0 || this.history.length < 3 && this.history[this.history.length - 1].status === 0}
    },
    methods: {
        reload() {
            this.historyLoading = true
            this.listLoading = true
            Request({
                url: '/vaccine-history',
                method: 'get'
            }).then(res => {
                this.history = res.vaccine_history
                this.historyLoading = false
            })
            Request({
                url: '/get-medical-point-list',
                method: 'get'
            }).then(res => {
                this.medical_points = res.medical_point_list.filter(x => x.vaccine_B > 0 || x.vaccine_K > 0)
                this.listLoading = false
            })
        },
        openDialog(id, B, K) {
            this.temp_id = id;
            this.temp_B = B;
            this.temp_K = K;
            this.dialogVisible = true;
        },
        cancelDialog() {
            this.temp_id = -1;
            this.dialogVisible = false
        },
        bookVaccine() {
            this.$refs.dialogForm.validate(valid => {
                if(valid) {
                    this.dialogVisible = false
                    Request({
                        url: '/vaccine',
                        method: 'post',
                        data: {
                            medical_point_id: this.temp_id,
                            manufacturer: this.dialogForm.type,
                            time: new Date(+new Date() + 8*3600*1000).toISOString().slice(0, 19).replace('T', ' ')
                        }
                    }).then(res => {
                        if (res === 'success') {
                            ElMessage({
                                message: '预约成功',
                                type: 'success'
                            })
                            this.reload()
                        }
                        else if (res) {
                            ElMessage({
                                message: '错误：' + res,
                                type: 'error'
                            })
                        }
                    })
                }
            })
        },
        deleteApp() {
            Request({
                url: '/vaccine-cancel',
                method: 'delete'
            }).then(res => {
                if (res === 'success') {
                    ElMessage({
                        message: '取消预约成功',
                        type: 'success',
                        duration: 1000
                    })
                    this.reload()
                }
                else if (res) {
                    ElMessage({
                        message: '错误：' + res,
                        type: 'error'
                    })
                }
            })
        }
    }
}
</script>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.disp-card {
    width: 480px;
    margin-top: 20px;
    margin-left: 20px;
}

.item {
    font-size: 14px;
    margin-bottom: 18px;
}
</style>